<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { useSettingstore } from '@/stores/setting.ts'
const usesetting = useSettingstore()
const route = useRoute()
import { ref } from 'vue'
import { useUserstore } from '@/stores/userStore.ts'
//@ts-ignore
import { ElMessage } from 'element-plus'
const router = useRouter()
const icon = ref('Expand')
const changeicon = () => {
  usesetting.changefold()
  if (usesetting.isfold) {
    icon.value = 'Fold'
  } else {
    icon.value = 'Expand'
  }
}
const refresh = () => {
  usesetting.changefresh()
}
const fullScreen = () => {
  let full = document.fullscreenElement
  if (!full) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}
const deluser = async () => {
  try {
    router.push('/login')
    await useUserstore().Logout()
  } catch (e) {
    ElMessage({
      type: 'error',
      message: '退出登录失败',
    })
  }
}
let dark = ref<boolean>(false)
const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])
const changeDark = () => {
  //获取HTML根节点
  let html = document.documentElement
  //判断HTML标签是否有类名dark
  dark.value ? (html.className = 'dark') : (html.className = '')
}

//主题颜色的设置
const setColor = () => {
  //通知js修改根节点的样式对象的属性与属性值
  const html = document.documentElement
  html.style.setProperty('--el-color-primary', color.value)
}
</script>

<template>
  <div class="tabbar">
    <div class="tabbar_left">
      <el-icon style="margin-right: 10px" @click="changeicon">
        <component :is="icon"></component>
      </el-icon>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item
          :to="ele.path"
          v-for="ele in route.matched"
          :key="ele.path"
          v-show="ele.meta.title"
        >
          <el-icon style="margin: 0 2px; vertical-align: middle">
            <component :is="ele.meta.icon"></component>
          </el-icon>
          {{ ele.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tabbar_right">
      <el-button size="small" circle @click="refresh">
        <el-icon>
          <Refresh />
        </el-icon>
      </el-button>
      <el-button size="small" circle @click="fullScreen">
        <el-icon>
          <FullScreen />
        </el-icon>
      </el-button>
      <el-popover
        placement="bottom"
        title="主题设置"
        :width="300"
        trigger="hover"
      >
        <!-- 表单元素 -->
        <el-form>
          <el-form-item label="主题颜色">
            <el-color-picker
              :teleported="false"
              @change="setColor"
              v-model="color"
              size="small"
              show-alpha
              :predefine="predefineColors"
            />
          </el-form-item>
          <el-form-item label="暗黑模式">
            <el-switch
              @change="changeDark"
              v-model="dark"
              class="mt-2"
              style="margin-left: 24px"
              inline-prompt
              active-icon="MoonNight"
              inactive-icon="Sunny"
            />
          </el-form-item>
        </el-form>
        <template #reference>
          <el-button size="small" icon="Setting" circle></el-button>
        </template>
      </el-popover>
      <img
        :src="useUserstore().userInfo.avatar"
        style="height: 24px; width: 24px; border-radius: 50%"
      />
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ useUserstore().userInfo.name }}
          <el-icon
            class="el-icon--right"
            style="
              display: inline-block;
              margin-right: 20px;
              vertical-align: middle;
            "
          >
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu @click="deluser">
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tabbar {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .tabbar_left {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .tabbar_right {
    display: flex;
    align-items: center;

    img {
      margin: 0 10px;
    }

    .example-showcase .el-dropdown-link {
      cursor: pointer;
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
    }
  }
}
</style>
